<template>
	<view class="content">
		<!-- F1：数据拾取器 -->
		<view class="f1">
			<!-- mode：拾取器模式：普通、日期、省市 -->
			<!-- range：可供用户选择的范围 -->
			<!-- 普通选择器：缴费类型选择器 -->
			<picker mode="selector" :range="feeTypeRange" @change="doFeeTypeChange">
				<view class="selector">
					<text>{{curFeeType | feeType}}</text>
					<uni-icons type="bottom"/>
				</view>
			</picker>
			<!-- fields：需要哪些选择字段，可取值：year、month、day -->
			<!-- 日期选择器：缴费月份选择器 -->
			<picker mode="date" fields="month" @change="doMonthChange">				
				<view class="selector">
					<text>{{monthText}}</text>
					<uni-icons type="bottom"/>
				</view>
			</picker>
		</view>
		
		<!-- F2：缴费历史记录列表 -->
		<!-- thumbnail：缩略图 -->
		<!-- extra：额外信息 -->
		<uni-card v-for="(r, i) in records" :key="i" class="card" :title="r.type | feeType" :thumbnail="r.type | feeTypeIcon" :extra="'￥'+r.amount">
			<view class="card-content">
				<view class="item">
					<text>缴费状态</text>
					<text>交易成功</text>
				</view>
				<view class="item">
					<text>缴费用户</text>
					<text>{{r.householdId}}</text>
				</view>
				<view class="item">
					<text>缴费时间</text>
					<text>{{r.paidTime | datetime}}</text>
				</view>
			</view>
		</uni-card>
		<!-- <text>{{records}}</text> -->
		<uni-title v-show="records.length===0" type="h4" align="center" title="没有查询到相关缴费记录" color="#8a8a8a"></uni-title>
	</view>
</template>

<script>
import { feeRecord } from '../../service'
	export default {
		data() {
			return {
				monthText: "月份", 	//月份选择器显示出来的文本内容
				records: [],	//缴费历史记录
				feeTypeRange: [	//“缴费类型”数据拾取器可选范围
					'全部',
					'水费',
					'电费',
					'燃气费',
					'物业费',
					'停车费',
					'宽带费'
				],
				curFeeType: -1,	//用户当前选中的“缴费类型”
				startTime:0,	//用户选中的月份开始时间戳  
				endTime:0,		//用户选中的月份结束时间戳
			}
		},
		//生命周期方法 —— 组件加载时
		async onLoad(){
			//动态的修改标题栏中的文本内容		
			uni.setNavigationBarTitle({
				title: '我的缴费记录'
			})
			//异步请求缴费记录
			let data = await feeRecord()
			// console.log(data)
			this.records = data
		},
		methods: {
			//处理“月份”选项改变事件
			async doMonthChange(e){
				// console.log(e.detail.value)
				let d = e.detail.value  //用户选中项
				this.monthText = d
				// 用户选中的月份形如：'yyyy-mm'
				//现在需要找到选中月份的开始时间，以及结束时间
				this.startTime = new Date(d).getTime()
				let [year, month] = d.split('-')  //使用-拆分字符串
				this.endTime = new Date(year, month).getTime()-1
				//console.log(this.startTime, this.endTime)
				//向服务器端接口发起异步数据请求
				let data = await feeRecord(this.curFeeType, this.startTime, this.endTime)
				this.records = data
			},
			//处理“缴费类型”选项改变事件
			async doFeeTypeChange(e){
				// console.log(e.detail.value)
				//保存用户选中的“缴费类型”序号为模型变量
				this.curFeeType = e.detail.value
				//向服务器接口异步请求新的数据
				let data = await feeRecord(this.curFeeType, this.startTime, this.endTime)
				this.records = data
			}
		}
	}
</script>

<style lang="scss" scoped>
view.card {
	flex-direction: column;
}
.card-content {
	//弹性容器主轴方向改为纵向
	flex-direction: column;
	width: 100%;
	.item {
		width: 100%;
		padding: $uni-spacing-col-sm  0;
		border-bottom: 1px solid $zh-grey-lighter;
		//弹性容器中的子元素在主轴方向对齐方式：空白在中央
		justify-content: space-between;
		&:last-child {
			border-bottom: none;
		}
	}
}

.f1 {
	padding: $uni-spacing-col-lg  $uni-spacing-row-lg  0; 
	.selector {
		background-color: $uni-bg-color;
		padding: $uni-spacing-col-base $uni-spacing-row-base*2;
		border-radius: 60rpx;
		border:1px solid  darken($zh-grey-lighter, 10%); //darken()——SCSS函数，返回变暗指定比例后的颜色
		margin-right: $uni-spacing-row-lg;
		//弹性容器内的子元素在交叉轴上居中对齐
		align-items: center;
		text:first-child { margin-right: $uni-spacing-row-lg;}
	}
}
</style>
